import { dateFormat, sizeFormat } from '@/utils'

export function getFlowChartOption() {
  return {
    color: ['#3cb371', '#ff7f50'],
    title: {
      text: '',
      x: 'center',
      textStyle: {
        fontSize: 14,
        color: '#00c1e0',
      },
    },
    legend: {
      bottom: '0px',
      left: '20px',
      orient: 'vertical',
      data: [],
      formatter: null,
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0,193,224,0.9)',
      textStyle: {
        color: '#fff',
      },
      borderColor: '#00c1e0',
      borderWidth: 1,
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#ccc',
          width: 1,
          type: 'solid',
        },
      },
      formatter(datas) {
        let res = `${dateFormat(datas[0].value[0])}<br/>`
        let val
        for (let i = 0, length = datas.length; i < length; i++) {
          val = sizeFormat(datas[i].value[1])
          res += `${datas[i].seriesName}：${val}<br/>`
        }
        return res
      },
    },
    xAxis: [
      {
        type: 'time',
        boundaryGap: false,
        splitNumber: 3,
        offset: 0,
        max: 'dataMax',
        axisLabel: {
          color: '#333',
          showMaxLable: true,
          formatter(value) {
            return dateFormat(value, 'MM-dd hh:mm:ss')
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        name: '流量',
        type: 'value',
        axisLabel: {
          color: '#333',
          formatter(value) {
            return sizeFormat(value)
          },
        },

        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
    ],
    labelLine: {
      lineStyle: {
        color: '#ccc',
      },
    },
    grid: {
      containLabel: true,
      left: 20,
      right: 20,
      top: 40,
      bottom: 60,
    },
    series: [{ yAxisIndex: 0, type: 'line', showSymbol: false, smooth: false, areaStyle: { opacity: 0.1 } }],
  }
}

export function getLossChartOption() {
  return {
    color: ['#ff7f50', '#3cb371'],
    dataZoom: [{
      type: 'inside',
    }],
    title: {
      text: '',
      x: 'center',
      textStyle: {
        fontSize: 14,
        fontWeight: 'bolder',
        color: '#00c1e0',
      },
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0,193,224,0.9)',
      textStyle: {
        color: '#fff',
      },
      borderColor: '#00c1e0',
      borderWidth: 1,
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#ccc',
          width: 1,
          type: 'solid',
        },
      },
      formatter(datas) {
        let res = `${dateFormat(datas[0]?.value[0])}<br/>`
        let val
        for (let i = 0, length = datas.length; i < length; i++) {
          const name = datas[i].seriesName
          const value = Number(datas[i].value[1].toFixed(2))
          if (name.includes('loss'))
            val = `${value}%`
          else if (name.includes('rtt'))
            val = `${value}ms`
          else
            val = value

          res += `${name}：${val}<br/>`
        }
        return res
      },
    },
    legend: {
      bottom: '0px',
      left: '20px',
      orient: 'vertical',
      data: [],
    },
    xAxis: [
      {
        type: 'time',
        boundaryGap: false,
        splitNumber: 3,
        offset: 0,
        axisLabel: {
          color: '#333',
          formatter(value) {
            return dateFormat(value, 'MM-dd hh:mm:ss')
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        name: '丢包率(%)',
        type: 'value',
        min: 0,
        max: 100,
        axisLabel: {
          color: '#333',
          formatter: '{value}%',
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      {
        name: '延时(ms)',
        type: 'value',
        min: 0,
        max(value) {
          return value.max !== 0 && Number.isFinite(value.max) ? Math.round(value.max) : 5
        },
        axisLabel: {
          color: '#333',
          formatter: '{value}ms',
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
    ],
    labelLine: {
      lineStyle: {
        color: '#ccc',
      },
    },
    grid: {
      containLabel: true,
      left: 20,
      right: 20,
      top: 40,
      bottom: 50,
    },
    series: [
      {
        yAxisIndex: 1,
        type: 'line',
        showSymbol: false,
        smooth: false,
        areaStyle: { opacity: 0.1 },
      },
    ],
  }
}

export function getPackChartOption() {
  return {
    color: ['#3cb371', '#ff7f50'],
    title: {
      text: '',
      x: 'center',
      textStyle: {
        fontSize: 14,
        color: '#00c1e0',
      },
    },
    legend: {
      bottom: '0px',
      left: '20px',
      orient: 'vertical',
      data: [],
      formatter: null,
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0,193,224,0.9)',
      textStyle: {
        color: '#fff',
      },
      borderColor: '#00c1e0',
      borderWidth: 1,
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#ccc',
          width: 1,
          type: 'solid',
        },
      },
      formatter(datas) {
        let res = `${dateFormat(datas[0].value[0])}<br/>`
        let val
        for (let i = 0, length = datas.length; i < length; i++) {
          val = `${Math.floor(datas[i].value[1])}个`

          res += `${datas[i].seriesName}：${val}<br/>`
        }
        return res
      },
    },
    xAxis: [
      {
        type: 'time',
        boundaryGap: false,
        splitNumber: 3,
        offset: 0,
        max: 'dataMax',
        axisLabel: {
          color: '#333',
          showMaxLable: true,
          formatter(value) {
            return dateFormat(value, 'MM-dd hh:mm:ss')
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        name: '包数',
        type: 'value',
        min: 0,
        max: 'dataMax',
        axisLabel: {
          color: '#333',
          formatter(value) {
            return `${Math.trunc(value)}个`
          },
        },

        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
    ],
    labelLine: {
      lineStyle: {
        color: '#ccc',
      },
    },
    grid: {
      containLabel: true,
      left: 20,
      right: 20,
      top: 40,
      bottom: 60,
    },
    series: [{ yAxisIndex: 0, type: 'line', showSymbol: false, smooth: false, areaStyle: { opacity: 0.1 } }],
  }
}

export function getBarOption(title, type: 'times' | 'flow' = 'times', isRotate = true) {
  return {
    title: {
      text: title,
    },
    legend: {},
    grid: {
      containLabel: true,
      left: 10,
      right: 10,
      top: 40,
      bottom: 10,
    },
    xAxis: {
      type: 'category',
      splitNumber: 3,
      boundaryGap: [0, 0.01],
      axisLine: {
        lineStyle: {
          color: '#d1d5db',
        },
      },
      axisLabel: {
        color: '#333',
        interval: 0,
        fontSize: 10,
        rotate: isRotate ? 25 : 0,
        formatter(value) {
          return value.length > 15 ? `${value.substring(0, 12)}...` : value
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter(value) {
          return type === 'times' ? `${value}次` : sizeFormat(value)
        },
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter(datas) {
        const [name = '', value = 0] = datas[0].value
        const valueStr = type === 'times' ? `${value}次` : sizeFormat(value)
        const res = `${name}<br/> ${valueStr}<br/>`
        return res
      },
    },
    series: [
      {
        name: '',
        type: 'bar',
        barWidth: 30,
        data: [],
      },

    ],
  }
}
